<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-card class="user-card">
          <div class="user">
            <img class="user-img" src="@/assets/image/other/IMG0486.png" />
            <div>
              <h2 class="user-name">Admin</h2>
              <p class="user-access">超级管理员</p>
            </div>
          </div>
          <div class="user-info">
            <p>上次登录时间：<span>2023-2-9</span></p>
            <p>上次登录地点：<span>重庆</span></p>
          </div>
        </el-card>
        <el-card class="info-card">
          <el-table
            class="el-table"
            :data="tableData"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="date" label="日期" width="180" heigh="100px">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </el-card>
        <el-card class="echart1-card" style="margin-top: 20px">
          <div class="echart1" ref="echart1" style="height: 313px"></div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="sys-card">
          <div slot="header" class="clearfix">
            <span class="sys-name">系统公告</span>
          </div>
          <div
            v-for="sysinfo in systemData"
            :key="sysinfo.id"
            :index="sysinfo.id"
            class="text-item"
          >
            <p class="sys-info-title">{{ sysinfo.title }}</p>
            <p class="sys-info-date">
              <i :class="`el-icon-${sysinfo.icon}`"></i>{{ sysinfo.date }}
            </p>
          </div>
        </el-card>
        <el-card class="echart2-card">
          <div class="echart2" ref="echart2" style="height: 300px"></div>
        </el-card>
        <el-card class="echart3-card">
          <div class="echart3" ref="echart3" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "index",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      systemData: [
        {
          id: 1,
          date: "2022-10-21 09:00",
          title: "【内部分享】如何建立良好的客户关系",
          icon: "timer",
        },
        {
          id: 2,
          date: "2022-10-21 09:00",
          title: "【内部分享】如何建立良好的客户关系",
          icon: "timer",
        },
        {
          id: 3,
          date: "2022-10-21 09:00",
          title: "【内部分享】如何建立良好的客户关系",
          icon: "timer",
        },
        {
          id: 4,
          date: "2022-10-21 09:00",
          title: "【内部分享】如何建立良好的客户关系",
          icon: "timer",
        },
        {
          id: 5,
          date: "2022-10-21 09:00",
          title: "【内部分享】如何建立良好的客户关系",
          icon: "timer",
        },
        {
          id: 6,
          date: "2022-10-21 09:00",
          title: "【内部分享】如何建立良好的客户关系",
          icon: "timer",
        },
      ],
    };
  },
  mounted() {
    var myechart1 = echarts.init(this.$refs.echart1);
    var myechart2 = echarts.init(this.$refs.echart2);
    var myechart3 = echarts.init(this.$refs.echart3);
    // 指定图表的配置项和数据
    var option1 = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
        },
      ],
    };
    var option2 = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
    var option3 = {
      title: {
        text: "Stacked Line",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "Email",
          type: "line",
          stack: "Total",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "Union Ads",
          type: "line",
          stack: "Total",
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "Video Ads",
          type: "line",
          stack: "Total",
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: "Direct",
          type: "line",
          stack: "Total",
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: "Search Engine",
          type: "line",
          stack: "Total",
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
    myechart1.setOption(option1);
    myechart2.setOption(option2);
    myechart3.setOption(option3);
  },
};
</script>

<style lang="less" scoped>
.echart2-card {
  height: 300px;
  margin-top: 20px;
  margin-left: 20px;
}
.echart3-card {
  margin-top: 20px;
  margin-left: 20px;
}
.sys-name {
  font-size: 20px;
}
.text-item {
  border-bottom: 1px solid #f5f5f5;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  .sys-info-date {
    font-size: 15px;
    color: #696969;
  }
}
.sys-card {
  margin-left: 20px;
  line-height: 30px;
}
.info-card {
  margin-top: 20px;
}
.el-table {
  line-height: 10px;
}
.user {
  padding-left: 30px;
  padding-bottom: 20px;
  display: flex;
  margin-bottom: 30px;
  border-bottom: 2px solid #c0c0c0;
  img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  .user-name {
    margin: 0;
    font-size: 32px;
    padding-top: 40px;
    padding-left: 50px;
    line-height: 60px;
  }
  .user-access {
    color: #999;
    padding-left: 55px;
    line-height: 10px;
  }
}
.user-info {
  p {
    padding-left: 10px;
    line-height: 20px;
    font-size: 10px;
    color: #999;
  }
  span {
    padding-left: 10px;
    font-size: 14px;
    color: #000;
  }
}
</style>